<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <title>个人中心</title>
    <%@ include file="/pages/common/head.jsp" %>
    <style>
        table {
            display: block;
            width: 340px;
            height: 200px;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
玩家名: ${requestScope.user.name}<br>
对局数: ${requestScope.user.playCount}<br>
获胜数: ${requestScope.user.winCount}<br>
当前使用棋盘: &nbsp;<img src="" id="currentBoard" width="100" height="60" alt=""><br><br>
我的棋盘(双击使用):
<table>
    <c:forEach items="${requestScope.userBoards}" var="board" varStatus="status">
        <c:if test="${status.index % 3 == 0}">
            <tr>
        </c:if>
        <td><img ondblclick="useBoard(${board.id})" src="static/board_img/${board.name}.jpg" width="100" height="60"
                 alt=""></td>
        <c:if test="${(status.index + 1) % 3 == 0 || status.last}">
            </tr>
        </c:if>
    </c:forEach>
</table>
棋盘商店(双击购买):
<table>
    <c:forEach items="${requestScope.boards}" var="board" varStatus="status">
        <c:if test="${status.index % 3 == 0}">
            <tr>
        </c:if>
        <td><img ondblclick="buyBoard(${board.id})" src="static/board_img/${board.name}.jpg" width="100" height="60"
                 alt=""></td>
        <c:if test="${(status.index + 1) % 3 == 0 || status.last}">
            </tr>
        </c:if>
    </c:forEach>
</table>
<script type="text/javascript">
    function updateBoard() {
        $.getJSON("userServlet?action=getBoard", {
            id: ${requestScope.user.id}
        }, function (boardName) {
            $('#currentBoard').attr('src', 'static/board_img/' + boardName + '.jpg');
        });
    }

    function useBoard(boardId) {
        $.getJSON("userServlet?action=useBoard", {
            userId: ${requestScope.user.id},
            boardId: boardId
        }, function () {
            updateBoard();
        })
    }

    function buyBoard(boardId) {
        if (!confirm('确定购买？')) {
            return;
        }
        $.getJSON("boardServlet?action=buyBoard", {
            userId: ${requestScope.user.id},
            boardId: boardId
        }, function (success) {
            if (!success) {
                alert('已经购买过了哦');
                return;
            }
            if (confirm('购买成功！是否立即使用？')) {
                useBoard(boardId);
            }
        });
    }

    $(function () {
        updateBoard();
    });
</script>
</body>
</html>
